:root {
  --background: #pink;
}

/*引入项目文件*/
@font-face {
  font-family: "iconfont";
  src: url("iconfont.eot");
  src: url("iconfont.eot?#iefix") format("embedded-opentype"),
    url("iconfont.woff") format("woff"), url("iconfont.ttf") format("truetype"),
    url("iconfont.svg#iconfont") format("svg");
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  width: 430px;
  height: 100px;
  border: 1px solid red;
}

/* 歌曲信息轨道区域 */
.player{
    position:relative;
    z-index:3;
    width: 100%;
    height: 100%;
    border:1px solid red;
    background-color: pink;
}
.player-track {
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  left: 15px;
  padding: 13px 22px 10px 184px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 15px 15px 0 0;
  transition: top 0.3s ease;
}

/* 歌曲信息轨道区域活动态 */
.player-track.active{
    top:-95px;
}

.album-name{
    color:#333;
    font-size: 17px;
    font-weight: bold;
}

.track-name {
  color: #888;
  font-size: 13px;
  margin: 3px 0 12px 0;
}

.track-time {
  height: 12px;
  line-height: 12px;
  margin-bottom: 4px;
  overflow: hidden;
}

.current-time,
.total-time {
  color: #ff668f;
  font-size: 11px;
  transition: 0.3s ease;
}

.current-time {
  float: left;
}
.total-time {
  float: right;
}

/* 播放进度区域 */
.progress-box {
  position: relative;
  height: 4px;
  background-color: #cad2d7;
  border-radius: 4px;
  cursor: pointer;
}

/* 悬停进度条显示时间 */
.hover-time{
    position:absolute;
    top:-30px;
    background-color:rgba(0, 0, 0, 0.8);
    color:#fff;
    font-size:12px;
    padding:5px 6px;
    border-radius: 4px;
    display: none;
}

.hover-bar{
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: rgba(0,0,0,0.1);
    border-radius: 4px;
    z-index:2;
}

/* 已播放的进度条颜色 */
.progress-bar{
    position:absolute;
    top:0;
    right:0;
    left:0;
    background-color: #fd6d94;
    border-radius: 4px;
    z-index:1;
    /* 播放时进度慢慢变化的效果 */
    transition:width 0.2s;
}
.player-content{
    position:relative;
    height:100%;
    background-color: #fff;
    border-radius: 15px;
    z-index:2;
    box-shadow: 0 30px 80px #656565;
}

/* 封面 */
.album-cover{
    width:115px;
    height:115px;
    border-radius:50%;
    position:absolute;
    top:-40px;
    left:40px;
    box-shadow:0 0 0 10px #fff;
    overflow: hidden;
    transition: 0.3s;
}

/* 唱片中间的小圆点 */
.album-cover::before{
    content:"";
    width:20px;
    height:20px;
    background-color: #d6dee6;
    position:absolute;
    top:50%;
    right:0;
    bottom:0;
    left:0;
    border-radius: 50%;
    margin:-10px auto auto auto;
    box-shadow:inset 0 0 0 2px #fff;
    z-index:1;
}

/* 封面活动态 */
.album-cover.active{
    top:-60px;
    box-shadow:0 0 0 4px #fff7f7;

}

.album-cover img{
    display: block;
    width:100%;
    height:100%;
    object-fit: cover;
}
.album-cover img.active{
    opacity: 1;
}

/* 播放时封面旋转 */
.album-cover.active img.active{
    animation:rotateAlbumCover 3s linear infinite;
}

/* 控制区 */
.play-controls{
    width:255px;
    height:100%;
    border:1px solid red;
    float:right;
    overflow:hidden;
    display: flex;
    align-items: center;
    padding-right: ;
}
.control{
    flex: 1;
    border:1px solid red;
}
.control .button{
    width:75px;
    height:75px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 6px;
    border:1px solid blue;
}

/* 定义动画 */
@keyframes rotateAlbumCover {
    0%{
        transform: rotateZ(0);
    }
    100%{
        transform: rotateZ(360deg);
    }
}


img {
  display: none;
}
